<!-- 左边图标跳转 页面 -->
<template>
	<view class="">

		<view style="height: 25rpx;">

		</view>
		<sunui-navbar activeFontWeight="400" :items="tabList" lineHeight="56rpx" :isCenter="true"
			:currentIndex="navIndex" padding="20rpx" :size="180" activeLineBg="#E9424D" activeFontSize="32rpx"
			fontSize="32rpx" color="#8F8F8F" textAlign="center" activeLineWidth="50%" activeDirection="center"
			activeLineHeight="8rpx" @change="getChange"></sunui-navbar>

		<mescroll-body ref="mescrollRef " @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="v-shop-cart flex-columns" v-for="(item,index) in list" :key="index">
				<view class="flex-align-center">
					<!-- <image class="border10" :src="detailList.foods_img"></image> -->
					<image class="border10" :src="item.goods_pic" v-if="item.type==3">
					</image>
					<view class="bgRed flex" v-if="item.type==2">
						<text>￥</text> <text style="font-size: 50rpx;"> {{Number(item.num)}}</text>
					</view>
					<view class="flex-columns v-content flex1" style="height: 200rpx;">
						<view class="">
							<view class="flex-between font-overflow margin-bottom_20rpx">
								<!-- <view class="v-name">{{ detailList.foods_name }}</view> -->
								<view class="v-name">{{item.prize_name}}</view>
							</view>

							<view v-if="item.type==3">有效期 {{formattedDate(item.expiry)}}</view>
							<view v-else>有效期:无</view>
						</view>
						<view class="v-price">
							{{item.is_status==1?'未发放':'已发放'}}
						</view>

						<!-- <view class="v-price">￥{{ detailInfo.goods.discount }}</view> -->
					</view>
					<view class="userMyPrize flex" @click="dhCode(item.code)" v-if="item.is_status==1&&item.type==3">
						兑换码
					</view>
					<view class="userMyPrize flex" v-if="item.type==2&&item.goods_status==1">
						去使用
					</view>
					<view class="userMyPrize flex" v-if="item.is_status==2&&item.type==3">
						已发放
					</view>
					<view class="userMyPrizeNo flex" v-if="item.goods_status==2">
						已失效
					</view>

				</view>
			</view>



		</mescroll-body>
		<sunui-popup ref="routeLine">
			<template v-slot:content>

				<view class="background-color_F7F7F7  flex-column-around" style="padding: 30rpx 100rpx;height: 350rpx;">
					<view class="flex-between" style="padding: 0 0 20rpx; width: 400rpx;">
						<view class="">

						</view>
						<view class="font-weight_bold text-align_center ">
							联系售后兑换核销号码
						</view>
						<uni-icons style="margin-right: 20rpx;" type="closeempty" size="20"
							@click="popCodeClose()"></uni-icons>



					</view>
					<view class="">
						{{code}}
					</view>

					<view class="copy flex" @click="paste()">
						复制
					</view>

				</view>
			</template>
		</sunui-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				goods_status: '',
				navIndex: 0,
				isUser: false,
				code: '',
				tabList: [{
						name: '全部'
					},
					{
						name: '未过期'
					},
					{
						// name: '用户评价 99+'
						name: '已过期'
					}
				]
			};
		},
		onLoad() {

		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			})
		},
		computed: {
			formattedDate: function() {
				return function(num) {
					let date = new Date(num* 1000);
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
			
					// 格式化为 "YYYY-MM-DD"
					return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
				};
			}
		},
		


		methods: {
			// 复制订单号
			paste() {
				console.log('复制')
				uni.setClipboardData({
					data: this.code
				});
			},
			dhCode(code) {
				this.code = code
				this.$refs.routeLine.show({
					anim: 'center',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false
				});
			},


			popCodeClose() {
				this.$refs.routeLine.close();
			},

			getChange(e) {
				this.navIndex = e;
				this.goods_status = e == 0 ? '' : e;
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				})

			},
			async upCallback(scroll) {


				const result = await this.$http.get({
					url: this.$api.lotteryLog,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						page: scroll.num,
						psize: 10,
						goods_status: this.goods_status,


					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);





				}
			},

		}
	};
</script>

<style lang="less">
	.copy {
		margin-top: 30rpx;
		width: 77px;
		color: #fff;
		height: 28px;
		background: rgb(25, 137, 250);
		border-radius: 51px;
	}

	.almost-lottery__rule {
		background-color: #FF893F;
		padding: 0 28rpx;
		color: #FFF8CB;

		.rule-head {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding-top: 20rpx;

			.line {
				flex: 1;
				height: 2rpx;
				background-color: #FFF3A5;
			}

			.title {
				width: 280rpx;
				color: #F63857;
				line-height: 70rpx;
				text-align: center;
				margin: 0 20rpx;
				border-radius: 8rpx;
				background-image: linear-gradient(0deg, rgba(255, 242, 158, 1), rgba(255, 244, 168, 1));
			}
		}


		.rule-body {
			color: #FFF8CB;
			font-size: 24rpx;
			padding: 10rpx 0 40rpx;

			.item {
				display: flex;
				margin-bottom: 10rpx;
			}

			.number {
				position: relative;
				top: 4rpx;
				width: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				color: #F63857;
				background: #FFF8CB;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.text {
				flex: 1;
			}

			.item-rule .text {
				display: flex;
				flex-direction: column;
			}
		}
	}

	.v-shop-cart {
		margin: 26rpx;
		padding: 26rpx;
		border-bottom: 2rpx solid #f7f7f7;
		background-color: #fff;
		border-radius: 20rpx;

		.bgRed {
			width: 186rpx;
			height: 198rpx;
			background-color: #FFF0EE;
			color: #F63857;
			margin-right: 20rpx;
		}

		.userMyPrize {
			width: 140rpx;
			height: 62rpx;
			border-radius: 102rpx;
			color: #fff;
			background: linear-gradient(96.28deg, rgb(254, 66, 59) 1.038%, rgb(255, 118, 39) 99.196%);
		}

		.userMyPrizeNo {
			width: 140rpx;
			height: 62rpx;
			border-radius: 102rpx;
			color: #999999;
			background: #E7E7E7;
		}

		image {
			width: 186rpx;
			height: 198rpx;
			margin-right: 26rpx;
		}

		.v-content {
			.v-name {
				font-size: 32rpx;
				font-weight: bold;
			}

			text {
				color: #8f8f8f;
				// padding: 10rpx 0;
				padding: 10rpx 0 16rpx;
			}

			.v-price {
				color: #999999;
				font-size: 26rpx;
			}
		}
	}
</style>